<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        button{
            margin: 10px;
        }
		.w{}
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .show{
            display: block;
        }
        .hide{
        	display: none;
        }
		
    </style>
	</head>
	<body>
		<!-- <button href="#" id="btn">
			<p class="show">隐藏</p>
			<p class="hide">显示</p>
		</button> -->
		<p id="btn">
			<button href="#" class="show">隐藏</button>
			<button href="#" class="hide">显示</button>
		</p>
		
		<!-- <button href="#" id="btn">显示</button> -->
		<div>
			<p class="w">临千仞之溪，非才长也，位高也！</p>
		</div>

	</body>
	<script>
		  //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
        //步骤：
        //1.获取事件源和相关元素
        //2.绑定事件
        //3.书写事件驱动程序
		
		var btn=document.getElementById("btn");
		var p0=document.getElementsByTagName("button")[0];
		var p1=document.getElementsByTagName("button")[1];
		var w=document.getElementsByClassName("w")[0];
		var a=0;
		btn.onclick=function(){
			if(a==0){
				w.className="hide"
				p0.className="hide"
				p1.className="show"
				a=1;
			}else{
				w.className="show"
				p1.className="hide"
				p0.className="show"
				a=0;
			}
			//禁止a链接跳转
			return false
		}
	</script>
</html>
